<!DOCTYPE html>
<!-- 引入thymeleaf -->
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <!-- thymeleaf通过在html标签中添加额外标签来绑定动态数据 -->
    <!-- 通过${}访问model中的数据 -->
    <title th:text="${title}">Title</title>
    <!-- 在/resources/static/js目录下创建一个hello.js 用如下语法依赖即可-->
    <!-- 通过@{}引用Web静态资源 -->
    <script type="text/javascript" th:src="@{/js/hello.js}"></script>
</head>
<body>
    <h1 th:text="${desc}">Hello Thymeleaf</h1>
    <h2>========作者信息========</h2>
    <p th:text="${author?.name}"></p>
    <p th:text="${author?.age}"></p>
    <p th:text="${author?.email}"></p>

    <!-- th:if条件判断 -->
    <div th:if="${not #lists.isEmpty(list)}">
        <h2>========作者列表========</h2>
        <ul>
            <li>
                <span>姓名</span>
                <span>年龄</span>
                <span>邮箱</span>
                <span>操作</span>
            </li>
            <!-- th:each循环迭代 -->
            <li th:each="auth:${list}">
                <span th:text="${auth.name}"></span>
                <span th:text="${auth.age}"></span>
                <span th:text="${auth.email}"></span>
                <!-- 在html代码中访问model -->
                <!--<button th:onclick="'getName(\''+${auth.name}+'\')'">获得名字</button>-->
            </li>
        </ul>
    </div>

    <!-- 在javascript中访问model -->
    <script th:inline="javascript">
        var single = [[${author}]];
        console.log(single.name+","+single.age);

        function getName(name) {
            alert(name);
        }

    </script>
</body>
</html>